<template>
  <div class="tuijiandetail">
    <!-- 返回、搜索部分 -->
    <div class="header" v-show="navshow">
      <backTitle></backTitle>
      <div class="van-ellipsis">歌单</div>
    </div>

    <!-- 背景图  -->
    <div class="banner">
      <div class="banner-head">
        <span class="banner-img">
          <img :src="img" alt />
        </span>
        <span class="dec">{{title}}</span>
      </div>
    </div>

    <!-- 歌单列表 -->
    <div class="songs">
      <span @click="playall" class="playall">
        <i class="iconfont icon-icon-test1">&nbsp;&nbsp;播放全部</i>
      </span>
      <template v-for="(item, index) in songlist">
        <div class="song" :data-id="item.id">
          <span class="num">{{index+1}}、</span>
          <div class="van-ellipsis" @click="change(item.id,index)">
            <span class="songname">{{item.name}}</span>
            <span class="singername">&nbsp;-{{item.ar[0].name}}</span>
          </div>
          <span class="dian" @click="clickpop(item.id,item.name,item.ar[0].name)">
            <van-icon name="ellipsis" />
          </span>
        </div>

        <!-- 歌曲详情弹出层 -->
        <van-popup v-model="songdetailshow" class="songdetail" :style="{ height: '43%' }" round>
          <div class="detail">
            <span class="singerimg">
              <img :src="singerimg" />
            </span>
            <div class="name">
              <div class="van-ellipsis songname">{{name}}</div>
              <div class="van-ellipsis singername">{{singername}}</div>
            </div>
          </div>
          <!-- 添加 -->
          <div class="add" @click="clickplaylistpop()">
            <van-icon name="add-o" />
            <span>添加到歌单</span>
          </div>
          <!-- 歌手 -->
          <router-link
            :to="{path:'/geshou/singerdetail/id',
              query:{id:singerid,title:singername}}"
          >
            <div class="singer">
              <van-icon name="manager-o" />
              <span>歌手：{{singername}}</span>
            </div>
          </router-link>
          <!-- 评论 -->
          <router-link :to="{path:'/pinglun/pinglun/id',query:{id:songid}}">
            <div class="comment">
              <van-icon name="chat-o" />
              <span>评论</span>
            </div>
          </router-link>
        </van-popup>
      </template>
    </div>

    <!-- 歌单弹出层 -->
    <van-popup v-model="playlistshow" :style="{height: '50%' }" round class="playlistpop">
      <div class="playlist-title">我的歌单</div>

      <div class="usersonglists">
        <template v-for="(item, index) in playlist" >
        <div class="usersonglist" @click="addsong(item.id)">
          <span><img :src="item.coverImgUrl" ></span>
          <div class="van-ellipsis">{{item.name}}</div>
        </div>
      </template>
      </div>
    </van-popup>
  </div>
</template>

<script>
import backTitle from "../../components/back";
import send from "../../navshow";

export default {
  data() {
    return {
      songlist: [], //歌单曲目
      singer: [], //歌手详情
      title: "", //详情描述
      img: "", //背景图片
      src: "", //获取播放地址
      songdetail: [],
      isplaying: false,
      navshow: true, //显示头部
      songdetailshow: false, //歌曲详情弹出层
      songid: "", //歌曲id
      singerid: "", //歌手id
      singerimg: "", //歌手头像
      name: "", //歌名
      singername: "", //歌手名
      playlistshow:false, //歌单弹出层
      playlist:[], //用户歌单
    };
  },
  created() {
    // 隐藏导航栏
    send.$emit("tab-show", false);

    // 显示播放器
    this.$store.commit("showplayer", true);

    var id = this.$route.query.id;
    this.title = this.$route.query.title; //歌单描述
    this.img = this.$route.query.src; //图片

    // 获取歌单详情
    var url = "http://localhost:3000/playlist/detail?id=" + id;
    this.axios.get(url).then(res => {
      this.songlist = res.data.playlist.tracks;
      this.$store.commit("playsonglist", this.songlist);
    });

  },
  components: {
    // 注册一个局部组件
    backTitle
  },
  // 挂载时
  mounted() {
    // 当滚动条滚动时改变头部的背景颜色
    $(".tuijiandetail").on("touchmove", function(e) {
      var top = $(window).scrollTop();
      if (top > 200) {
        $(".header").css("background-color", "black");
      } else {
        $(".header").css("background-color", "");
      }
    });
  },
  methods: {
    change(id, index) {
      this.$store.commit("changeid", id); //获取播放歌曲id
      this.$store.commit("changeindex", index); //获取播放歌曲id
      // 点击显示为播放状态
      this.$store.commit("showAudio", false);
    },

    //播放全部
    playall() {
      var id = this.$store.state.songlist[0].id; //获取列表第一首的id
      this.$store.commit("changeid", id); //获取播放歌曲id
      this.$store.commit("changeindex", 0);
      this.$store.commit("showAudio", false); // 点击显示播放状态
      this.$toast("开始播放全部歌曲");
    },

    // 显示歌曲详情弹出层
    clickpop(id, name, singername) {
      this.songid = id;
      this.songdetailshow = true;

      let url = "http://localhost:3000/song/detail?ids=" + id;
      this.axios.get(url).then(res => {
        this.singerid = res.data.songs[0].ar[0].id;
        this.singerimg = res.data.songs[0].al.picUrl; //歌手头像
        this.name = name;
        this.singername = singername;
      });
    },

    // 显示歌单弹出层
    clickplaylistpop() {
      this.songdetailshow = false;
      this.playlistshow=true;
      let url= "http://localhost:3000/user/playlist?uid=" + sessionStorage.getItem("id")

      // 获取用户歌单
      this.axios({
          url,
          withCredentials: true //关键
        }).then(res => {
          if (res.status == 200) {
            this.playlist=res.data.playlist
          }
        });
    },

    // 添加歌曲
    addsong(id) {
      let url="http://localhost:3000/playlist/tracks?op=add&pid="+id+"&tracks="+this.songid

      // 添加歌单
      this.axios({
          url,
          withCredentials: true //关键
        }).then(res => {
          if (res.status == 200) {
            this.playlistshow=false;
            this.$toast('添加成功')
          }
        });
    }
  }
};
</script>

<style>
/* 返回、搜索部分 */
.tuijiandetail .header {
  display: flex;
  width: 100vw;
  height: 60px;
  align-items: center;
  color: white;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 666;
}

.header span {
  font-size: 18px;
}

.header span i {
  color: white;
}

.tuijiandetail .header span:first-of-type {
  color: white;
}

.tuijiandetail .header .dian {
  transform: rotate(90deg);
}

/* 背景图 */
.tuijiandetail .banner {
  width: 100vw;
  height: 250px;
  background-color: #95e1d3;
  box-sizing: border-box;
}

.tuijiandetail .banner-head {
  width: 100%;
  display: flex;
  height: 100px;
  align-items: center;
  justify-content: center;
  padding-top: 120px;
}

.tuijiandetail .dec {
  display: block;
  width: 200px;
  font-size: 16px;
  color: white;
  margin-left: 20px;
}

.tuijiandetail .banner img {
  width: 100px;
  height: 100px;
  border-radius: 10px;
}

/* 歌单列表 */
.tuijiandetail .songs {
  width: 100vw;
  background-color: white;
  position: relative;
  z-index: 66;
  top: -45px;
  border-radius: 30px 30px 0 0;
  margin-bottom: 20px;
}

.tuijiandetail .song .num {
  margin-left: 6vw;
}

.icon-icon-test1 {
  margin-left: 20px;
  font-size: 22px;
}

/* 歌曲详情弹出层 */
.songdetail {
  width: 85vw;
}

.detail {
  width: 75vw;
  height: 80px;
  margin: 10px auto 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.detail .name {
  width: 55vw;
  height: 40px;
}

.detail .singername {
  margin-top: 5px;
  color: gray;
  font-size: 14px;
}

.detail .van-ellipsis {
  width: 55vw;
}

.singerimg {
  width: 20vw;
  height: 70px;
}

.singerimg img {
  width: 20vw;
  height: 70px;
  border-radius: 5px;
}

/* 功能 */
.tuijiandetail .add,
.tuijiandetail .singer,
.tuijiandetail .comment {
  width: 75vw;
  height: 8vh;
  margin: 0 auto 0;
  border-bottom: 1px solid #dbdbdd;
  display: flex;
  align-items: center;
}

.tuijiandetail .add i,
.tuijiandetail .singer i,
.tuijiandetail .comment i {
  font-size: 18px;
  margin-left: 1px;
  color: #333333;
}

.tuijiandetail .add span,
.tuijiandetail .singer span,
.tuijiandetail .comment span {
  width: 80vw;
  margin-left: 5vw;
  font-size: 16px;
}

/* 歌单弹出层 */
.playlistpop {
  width: 80vw;
}

.playlist-title {
  font-size: 18px;
  margin-top: 10px;
  margin-left: 20px;
  font-weight: bold;
}

.usersonglists {
  position: relative;
  top: 10px;
  left: 10px;
}

.playlistpop .usersonglist {
  width: 70vw;
  height: 8vh;
  margin: 5px auto 18px;
  display: flex;
  align-items: center;
}

.playlistpop .usersonglist img {
  width: 15vw;
  height: 55px;
  border-radius: 5px;
}

.playlistpop .usersonglist .van-ellipsis {
  text-align: left;
  font-size: 16px;
  margin-left: 15px;
}
</style>